import {
  systemRolePermissionTreeApi,
  type SysRoleItem,
  type PermissionTreeItem,
} from '@/api/systemRoleApi';
import { EnableStatusType } from '@/constants';

import type { FormInstance } from 'antd';

/**
 * 系统角色添加/编辑表单组件的属性接口
 */
interface SystemRoleAddProps {
  /** 表单实例 */
  form: FormInstance;
  /** 角色数据（编辑时使用） */
  data: SysRoleItem;
}

/**
 * 系统角色添加/编辑表单组件
 * 提供角色信息的录入和编辑功能
 */
const SystemRoleAddForm: FC<SystemRoleAddProps> = _props => {
  // 组件状态
  /** 权限树数据 */
  const [permissionTree, setPermissionTree] = useState<PermissionTreeItem[]>([]);
  /** 权限树加载状态 */
  const [permissionLoading, setPermissionLoading] = useState(false);

  /**
   * 获取权限树数据
   */
  const fetchPermissionTree = async () => {
    try {
      setPermissionLoading(true);
      const res = await systemRolePermissionTreeApi();
      if (res.success && res.data) {
        // 将单个权限树对象转换为数组格式
        const treeData = Array.isArray(res.data) ? res.data : [res.data];
        setPermissionTree(treeData);
      } else {
        window.$message.error(res.message || '获取权限树失败');
        setPermissionTree([]);
      }
    } catch (error) {
      console.error('获取权限树失败:', error);
      window.$message.error('获取权限树失败');
      setPermissionTree([]);
    } finally {
      setPermissionLoading(false);
    }
  };

  // 组件初始化时获取权限树
  useEffect(() => {
    fetchPermissionTree();
  }, []);

  /**
   * 递归构建权限树选项
   * @param treeData 权限树数据
   * @returns 树形选择器选项
   */
  const buildTreeOptions = (treeData: PermissionTreeItem[]): unknown[] => {
    return treeData.map(item => ({
      title: item.name || '',
      value: item.id,
      key: item.id,
      children:
        item.children && item.children.length > 0 ? buildTreeOptions(item.children) : undefined,
    }));
  };

  return (
    <ARow gutter={8}>
      <ACol span={24}>
        <AForm.Item
          name="name"
          label="角色名称"
          rules={[
            { required: true, message: '请输入角色名称' },
            { max: 50, message: '角色名称不能超过50个字符' },
          ]}
        >
          <AInput placeholder="请输入角色名称" allowClear />
        </AForm.Item>
      </ACol>

      <ACol span={24}>
        <AForm.Item
          name="description"
          label="角色描述"
          rules={[{ max: 200, message: '角色描述不能超过200个字符' }]}
        >
          <AInput.TextArea
            placeholder="请输入角色描述"
            allowClear
            rows={3}
            showCount
            maxLength={200}
          />
        </AForm.Item>
      </ACol>

      <ACol span={24}>
        <AForm.Item name="status" label="状态" rules={[{ required: true, message: '请选择状态' }]}>
          <ARadio.Group>
            <ARadio value={EnableStatusType.ENABLED.value}>{EnableStatusType.ENABLED.label}</ARadio>
            <ARadio value={EnableStatusType.DISABLED.value}>
              {EnableStatusType.DISABLED.label}
            </ARadio>
          </ARadio.Group>
        </AForm.Item>
      </ACol>

      <ACol span={24}>
        <AForm.Item name="permissionIdArray" label="权限配置" tooltip="选择该角色拥有的权限">
          {permissionLoading ? (
            <div style={{ textAlign: 'center', padding: '20px' }}>加载权限数据中...</div>
          ) : (
            <ATree
              checkable
              treeData={buildTreeOptions(permissionTree) as never[]}
              style={{ minHeight: 200, maxHeight: 400, overflow: 'auto' }}
              fieldNames={{
                title: 'title',
                key: 'key',
                children: 'children',
              }}
              showLine={{ showLeafIcon: false }}
              defaultExpandAll
            />
          )}
        </AForm.Item>
      </ACol>
    </ARow>
  );
};

export default SystemRoleAddForm;
